<template>
	<div class="tags clearfix">
		<span>标签</span>
		<dl>
			<dd v-for="list in selectTags">{{list}}</dd>
		</dl>
		<!--<img src="../../../assets/img/securityCheckImg/rightArrow.png"  style="margin-top: 0.0694rem;margin-left:0.2083rem;width: 0.2222rem;height: 0.3472rem;" />-->
		<right-arrow :fn="editTags" style="right:-0.1388rem;margin-top: 0.0694rem;"></right-arrow>
		<div v-transfer-dom>
			<x-dialog v-model="show" class="dialog-demo">
				<div @click="close" class="close">
					<span class="vux-close"></span>
				</div>
				<p class="txc">选择标签</p>
				<p>默认标签<span>点击可添加标签</span></p>
				<dl class="clearfix defaultTags">
					<dd @click="add(list)" v-for="list in defaultTags">{{list}}</dd>
				</dl>
				<p>已选标签<span>点击可删除标签</span></p>
				<dl class="clearfix selectTags">
					<dd @click="remove(list)" v-for="list in selectTags">{{list}}</dd>
				</dl>
			</x-dialog>
		</div>
	</div>
</template>

<script>
	import rightArrow from "@/components/securityCheck/securityCheckInfo/rightArrow"
	import { XDialog, TransferDomDirective as TransferDom } from 'vux'
	export default {
		name: '',
		data() {
			return {
				val: "",
				show: false,
				defaultTags: ["你", "我", "他", "她", "它", "塔", "塔", "塔", "塔", "塔", "塔"],
				selectTags: JSON.parse(localStorage.getItem("tags")) || []
}
},
directives: {
		TransferDom
	},
	components: {
		rightArrow,
		XDialog
	},
	mounted() {

	},
	methods: {
		editTags() {

			this.show = !this.show;
		},
		custom_add() {
			if(this.val =="") {
					alert("自定义标签为空~");
				} else {
					this.defaultTags.push(this.val);
					this.val = "";
				};
			},
			add(item) {
				const len = this.selectTags.length;
				if(len >= 5) {
					alert("标签最多只能5个~");
				} else {
					const i = this.defaultTags.indexOf(item);
					this.defaultTags.splice(i, 1);
					this.selectTags.push(item);
				};
			},
			remove(item) {
				const i = this.selectTags.indexOf(item);
				this.selectTags.splice(i, 1);
				this.defaultTags.push(item);
			},
			close() {
				this.show = false;
				localStorage.setItem("tags", JSON.stringify(this.selectTags));
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '~vux/src/styles/close';
	.tags {
		/*border-bottom: 1px solid #d9daeb;*/
		width: 5.2777rem;
		margin-right: 0.2777rem;
		position: relative;
		span {
			float: left;
			margin-left: 0.2083rem;
			font-size: 0.3888rem;
		}
		dl {
			float: right;
			margin-right: 0.5277rem;
			margin-top: 0.3055rem;
			dd {
				margin-top: -0.2777rem;
				float: left;
				font-size: 0.3888rem;
				width: 0.5555rem;
				height: 0.5555rem;
				line-height: 0.5555rem;
				text-align: center;
				border-radius: 0.5555rem;
				&:not(:last-child) {
					margin-right: 0.1666rem;
				}
				&:first-child {
					color: #FE6261;
				}
				&:nth-child(2) {
					color: #FE6261;
				}
				&:nth-child(3) {
					color: #FFA600;
				}
				&:nth-child(4) {
					color: #159BFD;
				}
				&:last-child {
					color: #159BFD;
				}
			}
		}
	}
</style>